/* eslint-disable jsx-a11y/no-static-element-interactions */
/* eslint-disable jsx-a11y/control-has-associated-label */
/* eslint-disable jsx-a11y/click-events-have-key-events */
import React, { useState, useCallback, ReactNode } from 'react';
import { NavLink } from 'react-router-dom';
import './Navigation.css';

export default function Navigation():ReactNode {
  const [headerClass, setHeaderClass] = useState('');
  const onClickMenu = useCallback(() => {
    if (headerClass === '') {
      setHeaderClass('change');
    } else {
      setHeaderClass('');
    }
  }, [headerClass]);
  return (
    <>
      <nav className={`navbar ${headerClass}`}>
        <NavLink to="/" className="nav-link" activeClassName="nav--active">
          <div className="navbar__link">
            <i className="ion ion-home" />
            <span>首页</span>
          </div>
        </NavLink>
        <NavLink to="/demos/2" className="nav-link" activeClassName="nav--active">
          <div className="navbar__link">
            <i className="ion ion-clipboard" />
            <span>测试页1</span>
          </div>
        </NavLink>
        <NavLink to="/store" className="nav-link" activeClassName="nav--active">
          <div className="navbar__link">
            <i className="ion ion-bag" />
            <span>测试页2</span>
          </div>
        </NavLink>
      </nav>
      <div className={`navControl ${headerClass}`} onClick={onClickMenu} />
    </>
  );
}
